<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .q-list{
            list-style: none;
            margin: 0;
            padding: 0;

        }
        .q-list > li{
            width: 70px;
            height: 70px;
            float: left;
            margin-left: -1px;
            border: 1px solid #f40;
            /*background: transparent;*/
        }
        .d-list{
            width: 283px;
            height: 300px;
            border: 1px solid #f40;
            border-top: 0px;
        }
        .box{
            position: relative;
            left: 10px;
            top: 50px;
        }
        .d-list{
            position: absolute;
            top: 70px;
            left: 0;
            margin-left: -1px;
        }
        .d-list > div{
            width: 100%;
            height: 100%;
            /*background: #faa;*/
            position: absolute;
            top: 0;
            left: 0;
            display: none;

        }
    </style>
</head>
<body>

<div class="box">

    <ul class="q-list">
        <li hehe="0" >

        </li>
        <li hehe="1">
        </li>
        <li hehe="2">

        </li>
        <li hehe="3">

        </li>
    </ul>
    <div  class="d-list">
        <div class="d-list1">1</div>
        <div class="d-list2">2</div>
        <div class="d-list3">3</div>
        <div class="d-list4">4</div>
    </div>
</div>

<script>
    var listDiv = document.getElementsByClassName("q-list"),
            list = document.getElementsByClassName("list");

    console.log(listDiv[0].getElementsByTagName("li"));
    var listL = listDiv[0].getElementsByTagName("li");

    var dlist = document.getElementsByClassName("d-list")[0];

    for(var j=0;j<listL.length;j++){
        listL[j].onmouseover = function(){

            for(var i=0;i<listL.length;i++){
                listL[i].style.border="1px solid transparent";
                listL[i].style.borderBottom="1px solid #f40";
                dlist.getElementsByTagName("div")[i].style.display = "none";
            }

            console.log(this);
            this.style.border="1px solid #f40";
            this.style.borderBottom="1px solid transparent";
            var num = this.getAttribute("hehe");
            dlist.getElementsByTagName("div")[num].style.display = "block";
        }
    }
</script>
</body>
</html>